 <template>
    <div class="home">
        <div class="wrap">
             <Panel icon="./img/title/5.png" title="预报警信息"  >
                <!--各区预警处置情况排行图表-->
                <!-- <Bar v-show="pickRank && pickRank.values.length >0 "  name="整改情况" :names="pickRank.names" :values="pickRank.values" :unit="pickRank.unit" /> -->
                <Reminder v-show="pickRank && pickRank.values.length >0 " :station-id="reqData?reqData.stationId:''" :area-code="reqData?reqData.areaCode:''"   name="整改情况" :names="pickRank.names" :values="pickRank.values"  />
                <NoData v-show="!pickRank  || pickRank &&pickRank.values.length === 0"/>
            </Panel>
            <Panel icon="./img/title/1.png" title="各区任务执行情况" unit="件">
                <!--各区任务执行情况图表-->
                <Scatter v-show="originRegion.data.length > 0" :data="originRegion.data" />
                <NoData v-show="originRegion.data.length === 0"/>
            </Panel>
            
            
            <Panel icon="./img/title/3.png" title="源头视频" >
                <!--源头视频-->
                <video-player  :station-id="reqData?reqData.stationId:''" :area-code="reqData?reqData.areaCode:''"/>
            </Panel>
        </div>
        <div class="wrap">
            <!--地图-->
            <JsonMap  :data="plantDistribute.data" :area-code="reqData?reqData.areaCode:''" @SelectCompany="SelectCompany" @change="getData" :searchBar="false" :top="160"/>
            
            <Mapfooter />
           
        </div>
        <div class="wrap">
            <Panel icon="./img/title/2.png" title="平台运营情况" >
                <!--平台运营情况-->
                <Platform v-show="inventoryContrast.data.length > 0" :data="inventoryContrast.data"/>
                <NoData v-show="inventoryContrast.data.length === 0" />
            </Panel>
            <Panel icon="./img/title/4.png" title="每日运单走势" :unit="fertQuantity.unit">
                <Line3 v-show="fertQuantity.values.length > 0" :titles="fertQuantity.titles" :values="fertQuantity.values" :names="fertQuantity.names" :unit="fertQuantity.unit" />
                <NoData v-show="fertQuantity.values.length === 0"/>
            </Panel>
           
            <Panel icon="./img/title/6.png" title="月度称重重量走势" :unit="outboundInventory.unit">
                <!--运单日均称重图表-->
                <Line1 v-show="outboundInventory.values.length > 0" :titles="outboundInventory.titles" :values="outboundInventory.values" :names="outboundInventory.names" :unit="outboundInventory.unit" />
                <NoData v-show="outboundInventory.values.length === 0"/>
            </Panel>
        </div>
    </div>
</template>

<script>
import JsonMap from '@/views/JsonMap'
import Platform from '@/components/platform'
import Reminder from '@/components/reminder'
import Mapfooter from '@/components/mapfooter'

import Line3 from '@/components/charts/Line3'
import Line1 from '@/components/charts/Line1'
import Scatter from '@/components/charts/Scatter'
import VideoPlayer from '@/components/videoplayer'
import NoData from '@/components/NoData'
import types from '@/store/constants/types'
import ns from '@/store/constants/ns'
import { mapState } from 'vuex'


const nameSpaced = ns.HOME + '/'
export default {
    name: 'Home',
    components: { JsonMap, Line3, Line1, NoData ,Scatter,VideoPlayer,Platform,Mapfooter,Reminder},
    computed: {
        ...mapState ( nameSpaced , {
            inventoryContrast: state => state.inventoryContrast,//车辆超载
            pickRank: state => state.pickRank,//各区预警处置情况
            originRegion: state => state.originRegion,//各区任务执行
            fertQuantity: state => state.fertQuantity,//各区电子运单上传情况
            outboundInventory: state => state.outboundInventory,//运单日均称重重量
            plantDistribute: state => state.plantDistribute//市企业分布情况
        })
    },
    data () {
        return {
            stationId:"",
            areaCode:"",
            reqData:null,
            InterVal:null,
            region: '', //当前数据所在的区域
            videoBig:false
        }
    },
    mounted() {
       this.InterVal = setInterval(() => {
           let obj = Object.assign({timer:true},this.reqData)
           this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj)
       },20000)
    },
    destroyed(){
        this.InterVal?clearInterval(this.InterVal):null
    },
    methods: {
        getData (data) {
            
            this.reqData = data
            this.region = data.name
            
            this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, data)
        },
        //选择企业
        SelectCompany(obj){
            this.reqData = obj
            this.title = `(${obj.name})`
            
            this.$store.dispatch(nameSpaced + types.HOME_GET_DATA, obj)
        }
    },
}
</script>

<style lang="scss" scoped>
@import '../../style/views/home/home.scss';
</style>